<template>
  <div>
    <div class="XboxTop">
      <div class="XboxTop_title">最新监测</div>
    </div>
    <div class="XboxTop_con" style="padding: 1rem;overflow-y: auto;scrollbar-width: none;">
      <div v-for="(item, i) in listData" :key="i" class="list_item" @click="getClick(item, i)">
        <div class="list_item_top">
          <div style="display: flex; align-items: center;">
            <div style="margin-right: 1rem;">
              <i class="el-icon-arrow-up" style="font-size: 1.8rem;" v-if="item.select"></i>
              <i class="el-icon-arrow-down" style="font-size: 1.8rem;" v-else></i>
            </div>
            <div style="color: #80F2FF;">{{ item.name }}</div>
          </div>
          <div style="display: flex;align-items: center;">
            <div style="margin-right: 1rem;">未定位</div>
            <div>未差分</div>
          </div>
        </div>
        <div v-if="item.select">
          <div style="padding: 0.5rem;display: flex;flex-wrap: wrap;">
            <div style="width: 50%;margin-bottom: 0.2rem;"><span class="text_lable">权属单位：</span><span>xxxx</span></div>
            <div style="width: 50%;margin-bottom: 0.2rem;"><span class="text_lable">SIM卡号：</span><span>xxxx</span></div>
            <div style="width: 50%;margin-bottom: 0.2rem;"><span class="text_lable">时间：</span><span>xxxx</span></div>
            <div style="width: 50%;margin-bottom: 0.2rem;"><span class="text_lable">坐标：</span><span>xxxx</span></div>
          </div>
          <div style=" background: rgba(32, 135, 249, 0.12); padding: 0.5rem;display: flex;justify-content: space-around">
            <div v-for="(a,l) in cstyleList" :key="l" style="display: flex;flex-direction: column;align-items: center;">
              <div style="margin-bottom: 0.2rem;">{{ a.name }}</div>
              <div style="font-weight: bold;color: #4FA2FF;">{{item[a.code]?item[a.code]:0}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  //变量
  data() {
    return {
      listData: [{ name: "杭湖锡线5号标", select: true, zt: 0 }, { name: "杭湖锡线5号标", select: false, zt: 0 }],
      cstyleList: [{
        code: "xxx",
        name: "蓄电池电压(v)"
      }, {
        code: "xxx",
        name: "工作电压(v)"
      }, {
        code: "xxx",
        name: "电流电压(A)"
      }, {
        code: "xxx",
        name: "充电电流(A)"
      }, {
        code: "xxx",
        name: "充电电压(v)"
      }]
    }
  },
  //初始
  mounted() { },
  //事件
  methods: {
    getClick(item, i) {
      this.listData[i].select = !this.listData[i].select
    }
  },
  //销毁
  beforeDestroy() { }
}
</script>
<style scoped>
.list_item {
  border: 1px solid #0E5FFF;
  margin-bottom: 1rem;
}

.list_item_top {
  background: url("~@/assets/hb_img/bj/bg_hb.png") no-repeat;
  background-size: 100% 100%;
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text_lable {
  color: rgba(255, 255, 255, 0.65);
}
</style>